<template>
  <div class="mv">
    <div class="header">
      <div @click="number=0"
           :class="{isActive:number===0}"
           class="tab">视频</div>
      <div @click="number=1"
           :class="{isActive:number===1}"
           class="tab">MV </div>
    </div>
    <div class="shiping"
         v-show="number===0">
      <button @click="isShow=!isShow">{{ name }}<i class="el-icon-arrow-right"
           style="margin-left:5px;margin-top:1px"></i></button>
      <div class="drawer mtop-10"
           v-show="isShow">
        <p>全部视频</p>
        <div class="main">
          <span v-for="tag in allTag"
                :key="tag.id"
                :class="{Active:currentId===tag.id}"
                @click="selectHotTag(tag.id,tag.name)">
            {{ tag.name }}
          </span>
        </div>
      </div>
      <div class="nav">
        <span v-for="tl in tagList"
              :key="tl.id"
              :class="{Sactive:name===tl.name}"
              @click="changeTag(tl.name)">{{ tl.name }}</span>
      </div>
      <div class=" mtop-10"
           style="margin-left:70px ">
        <mvList type="CoverUrl"
                :list="allMv"
                v-if="hasMore"></mvList>
        <mvList type="cover"
                :list="allMv"
                v-if="!hasMore"></mvList>
      </div>
    </div>
    <div class="MV"
         v-if="number===1">
      <template>
        <div class="new">
          <div class="first-mv">
            <p>最新MV<i class="el-icon-arrow-right"
                 style="margin-left:5px;margin-top:1px"></i></p>
            <div>
              <span v-for="name in tag"
                    :key="name.id"
                    :class="{ Sactive:index===name.id}"
                    @click="change(name.id,name.area)">{{ name.area }}</span>
            </div>
          </div>
          <div class="first">
            <mvList :list="newMv"
                    type="cover"></mvList>
          </div>
        </div>
      </template>
      <template>
        <div class="new">
          <div class="first-mv">
            <p class="mtop-10">网易出品<i class="el-icon-arrow-right"
                 style="margin-left:5px;margin-top:1px"></i></p>
          </div>
          <div class="first">
            <mvList :list=" NetEasyMv"
                    type="cover"></mvList>
          </div>
        </div>
      </template>
      <template>
        <div class="new">
          <div class="first-mv">
            <p class="mtop-10">MV排行榜<i class="el-icon-arrow-right"
                 style="margin-left:5px;margin-top:1px"></i></p>
            <div class="mtop-10">
              <span v-for="name in tag"
                    :key="name.id"
                    :class="{ Sactive:topIndex===name.id}"
                    @click="changeTopMv(name.id,name.area)">{{ name.area }}</span>
            </div>
          </div>
          <div class="rankList">
            <ul>
              <li v-for="(top,index) in topMvList"
                  :key="top.id"
                  @click="toPath(top.id)">
                <h3>{{ (index+1)>9?(index+1):'0'+(index+1) }}</h3>
                <img v-lazy="top.cover"
                     alt="">
                <div class="num">
                  <span class="play">{{top.score }}</span>
                  <svg class="icon cc"
                       aria-hidden="true">
                    <use xlink:href="#icon-redu"></use>
                  </svg>
                </div>
                <p>{{ top.name }}</p>
                <p style="font-size:12px;color:#666">{{ top.artistName }}</p>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import mvList from "@/components/mvList/mvList.vue"
import {
  getVideoAlltag, getVideoTagList,
  getAllMv, getAllVideo, getVideoByTag,
  getNewMv, getNetEasyMv, getTopMv
} from "@/api/video"
export default {
  data () {
    return {
      tabMenu: [{ name: '视频' }, { name: 'MV' }],
      isShow: false,
      currentId: 0,
      name: '全部视频',
      offset: 0,
      number: 0,
      index: 5,
      topIndex: 5,
      hasMore: true, // 是否还有更多视频未加载
      tagList: [],//视频列表标签
      allTag: [],//全部tag
      allMv: [],//全部mv
      newMv: [],//最新mv
      NetEasyMv: [],//网易出品
      topMvList: [],//排行榜
      queryInfo: {
        area: '全部',
        type: '全部',
        order: '最热',
        limit: 50
      },
      query: {
        area: '内地',
        limit: 8
      },
      tag: [{ area: '内地', id: 5 },
      { area: '港台', id: 4 },
      { area: '欧美', id: 8 },
      { area: '日本', id: 6 },
      { area: '韩国', id: 68 }],
      netEasy: {
        limit: 8,
        offset: 0
      },
      topMv: {
        area: '内地',
        limit: 10,
        offset: 0
      },
    }
  },
  components: { mvList },
  mounted () {
    // this.getAllMv()
  },
  methods: {
    changeTag (name, id) {
      this.currentId = id
      this.name = name
    },
    /* 从热门标签选择了标签 */
    selectHotTag (id, name) {
      this.name = name
      this.currentId = id
      this.getVideoByTag(id)
      this.isShow = false
    },
    // 改变最新mv样式
    change (index, area) {
      this.index = index
      this.query.area = area
      this.getNewMv()
    },
    changeTopMv (index, area) {
      this.topIndex = index
      this.topMv.area = area
      this.getTopMv()
    },
    // 获取视频分类(9个)
    async getVideoAlltag () {
      let res = await getVideoAlltag()
      if (res.code === 200) {
        this.tagList = res.data
      }
    },
    // 获取视频标签列表
    async getVideoTagList () {
      let res = await getVideoTagList()
      if (res.code !== 200) return
      this.allTag = res.data
    },
    // 获取全部mv 
    async getAllMv () {
      let res = await getAllMv({ ...this.queryInfo, offset: this.offset })
      if (res.code === 200) {
        this.allMv = res.data
      }
    },
    //
    // 获取全部视频列表
    async getAllVideo () {
      if (this.currentId === 0) {
        let res = await getAllVideo(this.offset)
        this.hasMore = res.hasmore
        this.allMv.push(...res.datas)
        if (this.offset <= 6 && this.hasMore) {
          this.offset += 1
          this.getAllVideo()
        }
        if (!this.hasMore) {
          this.getAllMv()
        }
      }
    },
    //根据视频列表获取视频
    async getVideoByTag (id) {
      let res = await getVideoByTag({ id: id, offset: this.offset })
      console.log(res, '1111')
    },
    // 获取最新mv
    async getNewMv () {
      let res = await getNewMv(this.query)
      if (res.code !== 200) return
      this.newMv = res.data
    },
    // 网易出品
    async getNetEasyMv () {
      let res = await getNetEasyMv(this.netEasy)
      if (res.code !== 200) return
      this.NetEasyMv = res.data
    },
    // mv排行榜
    async getTopMv () {
      let res = await getTopMv(this.topMv)
      if (res.code !== 200) return
      this.topMvList = res.data
    },
    // // 去mv详情
    toPath (mvid) {
      this.$router.push({ path: '/mvdetails', query: { mvid: mvid } })
    }
  },
  watch: {
    number: {
      immediate: true,
      handler (val) {
        if (val === 0) {
          this.getVideoAlltag()
          this.getVideoTagList()
          this.getAllVideo()
        } else {
          this.getNewMv()//最新mv
          this.getNetEasyMv()//网易
          this.getTopMv()//排行榜
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mv {
  margin-top: 20px;
  margin-left: 30px;
  .header {
    height: 30px;
    line-height: 30px;
    .tab {
      float: left;
      margin-right: 30px;
      cursor: pointer;
      &.isActive {
        transition: 0.1s;
        font-size: 22px;
        font-weight: 550;
        color: #353434;
        &::after {
          display: block;
          content: "";
          height: 4px;
          width: 90%;
          margin: 0 auto;
          background-color: #ec4141;
          border-radius: 2px;
        }
      }
    }
  }
  .shiping {
    button {
      float: left;
      margin-left: 90px;
      height: 30px;
      width: 100px;
      border-radius: 15px;
      padding: 5px;
      border: 1px solid #cdcbcb;
      background-color: #fff;
    }
    .drawer {
      position: absolute;
      top: 100px;
      left: 120px;
      width: 580px;
      border-radius: 4px;
      box-shadow: 0 1px 4px #dddddd;
      z-index: 20;
      background-color: #fff;
      p {
        text-indent: 10px;
        margin: 20px;
        height: 30px;
        padding-bottom: 10px;
        font-size: 13px;
        border-bottom: 1px solid #d3cece;
      }
      .main {
        width: 500px;
        display: flex;
        flex-wrap: wrap;
        margin-left: 30px;
        span {
          width: 100px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          margin-bottom: 10px;
          border-radius: 15px;
          font-size: 12px;
          padding: 1px 10px;
          cursor: pointer;
          color: #333333;
        }
        .Active {
          background-color: #fdecec;
          color: #ec4141;
        }
      }
    }
    .nav {
      margin-top: 20px;
      width: 800px;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 400px;

      span {
        margin-right: 10px;
        height: 20px;
        font-size: 13px;
        padding: 1px 10px;
        cursor: pointer;
      }
      .Sactive {
        transition: 0.05s;
        background-color: #fdecec;
        color: #ec4141;
        border-radius: 10px;
      }
    }
  }
  .MV {
    margin-top: 20px;
    margin-left: 75px;
    .new {
      width: 1080px;
      .first-mv {
        width: 1100px;
        height: auto;
        display: flex;
        justify-content: space-between;
        p {
          cursor: pointer;
          font-weight: bold;
        }
        div {
          span {
            height: 20px;
            font-size: 13px;
            padding: 0px 10px;
            cursor: pointer;
          }
          .Sactive {
            transition: 0.05s;
            background-color: #fdecec;
            color: #ec4141;
            border-radius: 10px;
          }
        }
      }
      .first {
        margin-left: -20px;
        margin-bottom: 10px;
      }
      .rankList {
        float: left;
        width: 1120px;
        margin-top: 10px;
        ul {
          float: left;
          width: 1120px;
          li {
            padding-top: 20px;
            float: left;
            width: 560px;
            height: 140px;
            position: relative;
            border-bottom: 1px solid #f2f2f2;
            border-right: 1px solid #f2f2f2;
            &:nth-child(2n) {
              border-right: none;
              h3 {
                margin-left: 15px;
              }
              .num {
                left: 80px;
              }
            }
            h3 {
              float: left;
              width: 40px;
              height: 40px;
              line-height: 40px;
              margin-right: 10px;
              margin-top: 30px;
              color: #9999ba;
              font-weight: lighter;
            }
            img {
              float: left;
              border-radius: 5px;
              width: 180px;
              height: 100px;
            }
            .num {
              position: absolute;
              top: 24px;
              width: 160px;
              height: 30px;
              left: 65px;
              .play {
                text-align: right;
                float: right;
                width: auto;
                height: 20px;
                font-size: 12px;
                color: #fff;
              }
              .cc {
                float: right;
                width: 12px;
                height: 12px;
                color: #fff;
              }
            }
            p {
              display: block;
              float: left;
              width: 300px;
              height: 30px;
              line-height: 30px;
              padding-left: 10px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}
</style>